<!-- 新增沟通记录模块 -->
<template>
  <div>

    <!-- 历史沟通记录 -->

    <div>
      <el-card class="box-card" body-style="height:300px;
                                            overflow: scroll;">
        <div slot="header" class="clearfix">
          <span style="line-height: 36px;">历史沟通记录</span>
        </div>
       
           <div :key="item.RECORD_ID" v-for="item in dateList" class="communication">
               <div class="communication_header">
                 {{item.RECORD_TIME}}
                </div> 
              <div class="communication_content" v-html="item.RECORD_CONTENT">
               <!-- {{item.RECORD_CONTENT}} -->
               </div>
           </div>
      </el-card>
      <div class="block">
        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage1" :page-size="5" layout="total, prev, pager, next" :total="pagecount">
        </el-pagination>
      </div>
    </div>
    <div class="space20">
    </div>
    <!-- 沟通内容 -->
    <div class="space20">
    </div>
    <el-form ref="form" label-width="80px">
      <el-form-item label="沟通内容">
        <el-input type="textarea" v-model="model.RECORD_CONTENT"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加</el-button>

      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import api from "@/js/api";
import getid from "@/js/getid";
import CustomShow from "@/components/Crm/CustomShow";
import OrganizationShow from "@/components/Crm/OrganizationShow";
export default {
  data() {
    return {
      content: "",
      currentPage1: 1,
      pagecount: 0,
      dateList: [],
      model: {
        RECORD_ID: "",
        RECORD_TIME: "",
        ID: "",
        USER_ID: "",
        RECORD_CONTENT: "",
        RECORD_TYPE: ""
      }
    };
  },
  components: {
    "custom-show": CustomShow,
    "organization-show": OrganizationShow
  },
  props: {
    type: {
      type: String,
      default: "客户"
    },
    id: {
      type: String,
      default: ""
    }
  },
  methods: {
    //新增
    onSubmit() {
      if (this.model.RECORD_CONTENT == "") {
        that.$notify.error({
          title: "失败",
          message: "沟通内容不能为空"
        });
        return;
      }
      var model = {
        RECORD_ID: getid.getid(),
        RECORD_TIME: getid.getToday(),
        ID: this.id,
        USER_ID: sessionStorage.getItem("userId"),
        RECORD_CONTENT: this.model.RECORD_CONTENT,
        RECORD_TYPE: this.type
      };
      api.RecordAdd(this, model);
    },
    handleCurrentChange(val) {
      this.currentPage1 = val;
      this.getDate();
    },
    getDate() {
      var data = {
        type: this.type,
        id: this.id,
        pageIndex: this.currentPage1,
        pageSize: 5
      };
      let that = this;
      api.RecordList(that, data, function(msg) {
        that.dateList = msg.Result;
        that.pagecount = msg.ListCount;
      });
    }
  },
  created() {
    this.getDate();
  }
};
</script>
<style scoped>
.communication {
    border: 1px solid #dfe6ec;
}

.communication_header {
    padding: 10px 0;
    line-height: 1.2em;
    font-weight: 400;
    color: #97a8be;
    background-color: #eef1f6;
}

.communication_header span {
    color: #1f2d3d;
}

.communication_content {
    padding: 5px 5px;
    line-height: 2em;
    color: #1f2d3d;
    font-size: 15px;
}

</style>
